<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-center-center h3 under-line") ----蓝牙设置----
            div(class="flex-column-item flex-row h3",
            v-for="(item,index) in items",
            :class="{'selected-text': index == currentItemIndex ? true: false}")
                div(class="flex-row-item") {{item.name}}
                div(class="flex-row-ietm") {{item.value.name}}
            div(class="flex-column-item") &nbsp;
        control-select(v-model="currentItem",:visible="visible",ref="selector")
</template>

<script>
    export default {
        data() {
            return {
                items: [
                    {
                        name: "蓝牙连接:",
                        value: window.machine.bluetooth.connection,
                        options: [{name: "关", value: false}, {name: "开", value: true}],
                        onChange(model) {
                            window.machine.bluetooth.connection = model.value;
                        }
                    },
                    {
                        name: "蓝牙设备:",
                        value: window.machine.bluetooth.device,
                        options: [
                            {name: "手机", value: "phone"},
                            {name: "动态", value: "response"}
                        ],
                        onChange(model) {
                            window.machine.bluetooth.device = model.value;
                        }
                    }
                ],
                visible: false,
                currentItem: null,
                currentItemIndex: 0
            };
        },
        computed: {},
        methods: {
            up() {
                if (this.visible) {
                    this.$refs.selector.up();
                    return;
                }

                this.currentItemIndex = this.currentItemIndex == 0 ? 1 : 0;
                this.currentItem = this.items[this.currentItemIndex];
            },
            down() {
                if (this.visible) {
                    this.$refs.selector.down();
                    return;
                }

                this.currentItemIndex = this.currentItemIndex == 0 ? 1 : 0;
                this.currentItem = this.items[this.currentItemIndex];
            },

            back() {
                if (this.visible) this.visible = false;
                else this.$router.push("/machine-setting?index=2");
            },
            yes() {
                this.visible = !this.visible;
            }
        },
        created() {
            this.currentItem = this.items[0];
        }
    };
</script>

<style lang="less">
</style>
